<template>
  <div id="app">
    <a-input placeholder="请输入任务" class="inputsty" 
    :value="inputValue" @change="inputChange"/>
    <a-button type="primary" @click="addItemToList">添加事项</a-button>
    <a-list :dataSource="changList" class="liststy" bordered>
      <a-list-item slot="renderItem" slot-scope="item">
        <!-- 复选框 -->
        <a-checkbox 
        :checked="item.done"
        @change="(e)=>{statusChange(e,item.id)}"
        >{{item.info}}</a-checkbox>
        <a slot="actions" @click="removeItemByList(item.id)">删除</a>
      </a-list-item>
      <!-- footer区域 -->
      <div slot="footer" class="footer">
        <!-- 未完成的任务个数 -->
        <span>{{unDoneLength}}条剩余</span>
         <!-- 操作按钮组合 -->
        <a-button-group>
          <a-button :type="listKey==='all'?'primary':'default'" @click="changeList('all')">全部</a-button>
          <a-button :type="listKey==='undown'?'primary':'default'" @click="changeList('undone')">未完成</a-button>
          <a-button :type="listKey==='down'?'primary':'default'" @click="changeList('done')">已完成</a-button>
        </a-button-group>
        <!-- 完成的任务清空 -->
        <a @click="clearList">清除已完成</a>
      </div>
  </a-list>
  </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
  data() {
    return {
    };
  },
  created(){
    this.$store.dispatch('getList')
  },
  computed:{
    ...mapState(['inputValue','listKey']),
    ...mapGetters(['unDoneLength','changList'])
  },
  methods:{
    inputChange(e){
      // console.log(e.target.value);
      this.$store.commit('setInputValue',e.target.value)
    },
    addItemToList(){
      if(this.inputValue.trim().length<=0){
        return this.$message.warning('文本框内容不能为空')
      }
      this.$store.commit('addItem')
    },
    removeItemByList(id){
      this.$store.commit('deleteItem',id)
    },
    statusChange(e,id){
      const param={
        id:id,
        status:e.target.checked
      }
      this.$store.commit('changeStstus',param)
    },
    clearList(){
      this.$store.commit('clearDone')
    },
    changeList(key){
      this.$store.commit('changKey',key)
      
      console.log(this.changList);
    }
  }
}
</script>

<style lang="scss">
#app{
margin: 30px;
  .inputsty{
    width: 600px;
    margin-right: 10px;
  }
  .liststy{
  width: 600px;
  margin-top: 10px;
  }
}

.footer{
  display: flex;
  justify-content: space-between;
}
</style>
